<template>
  <p>
    <a-space>
      <train-select-view v-model="params.trainCode" width="200px"></train-select-view>
      <a-date-picker v-model:value="params.date" valueFormat="YYYY-MM-DD" placeholder="请选择日期"></a-date-picker>
      <station-select-view v-model="params.start" width="200px"></station-select-view>
      <station-select-view v-model="params.end" width="200px"></station-select-view>
      <a-button type="primary" @click="handleQuery()">查找</a-button>
    </a-space>
  </p>
  <a-table :dataSource="dailyTrainTickets"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
           :loading="loading">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operation'">
      </template>
      <template v-else-if="column.dataIndex === 'station'">
        {{record.start}}<br/>
        {{record.end}}
      </template>
      <template v-else-if="column.dataIndex === 'time'">
        {{record.startTime}}<br/>
        {{record.endTime}}
      </template>
      <template v-else-if="column.dataIndex === 'duration'">
        {{calDuration(record.startTime, record.endTime)}}<br/>
        <div v-if="record.startTime.replaceAll(':', '') >= record.endTime.replaceAll(':', '')">
          次日到达
        </div>
        <div v-else>
          当日到达
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'ydz'">
        <div v-if="record.ydz >= 0">
          {{record.ydz}}<br/>
          {{record.ydzPrice}}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'edz'">
        <div v-if="record.edz >= 0">
          {{record.edz}}<br/>
          {{record.edzPrice}}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'rw'">
        <div v-if="record.rw >= 0">
          {{record.rw}}<br/>
          {{record.rwPrice}}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'yw'">
        <div v-if="record.yw >= 0">
          {{record.yw}}<br/>
          {{record.ywPrice}}￥
        </div>
        <div v-else>
          --
        </div>
      </template>
    </template>
  </a-table>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import {notification} from "ant-design-vue";
import axios from "axios";
import TrainSelectView from "@/components/train-select";
import StationSelectView from "@/components/station-select";
import dayjs from "dayjs";

export default defineComponent({
  name: "daily-train-ticket-view",
  components: {StationSelectView, TrainSelectView},
  setup() {
    const visible = ref(false);
    let dailyTrainTicket = ref({
      id: undefined,
      date: undefined,
      trainCode: undefined,
      start: undefined,
      startPinyin: undefined,
      startTime: undefined,
      startIndex: undefined,
      end: undefined,
      endPinyin: undefined,
      endTime: undefined,
      endIndex: undefined,
      ydz: undefined,
      ydzPrice: undefined,
      edz: undefined,
      edzPrice: undefined,
      rw: undefined,
      rwPrice: undefined,
      yw: undefined,
      ywPrice: undefined,
      createTime: undefined,
      updateTime: undefined,
    });
    const dailyTrainTickets = ref([]);
    // 分页的三个属性名是固定的
    const pagination = ref({
      total: 0,
      current: 1,
      pageSize: 10,
    });
    let loading = ref(false);
    const params = ref({});
    const columns = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '车次编号',
      dataIndex: 'trainCode',
      key: 'trainCode',
    },
    {
      title: '车站',
      dataIndex: 'station',
    },
    {
      title: '时间',
      dataIndex: 'time',
    },
    {
      title: '历时',
      dataIndex: 'duration',
    },
    // {
    //   title: '出发站',
    //   dataIndex: 'start',
    //   key: 'start',
    // },
    // {
    //   title: '出发站拼音',
    //   dataIndex: 'startPinyin',
    //   key: 'startPinyin',
    // },
    // {
    //   title: '出发时间',
    //   dataIndex: 'startTime',
    //   key: 'startTime',
    // },
    // {
    //   title: '出发站序',
    //   dataIndex: 'startIndex',
    //   key: 'startIndex',
    // },
    // {
    //   title: '到达站',
    //   dataIndex: 'end',
    //   key: 'end',
    // },
    // {
    //   title: '到达站拼音',
    //   dataIndex: 'endPinyin',
    //   key: 'endPinyin',
    // },
    // {
    //   title: '到站时间',
    //   dataIndex: 'endTime',
    //   key: 'endTime',
    // },
    // {
    //   title: '到站站序',
    //   dataIndex: 'endIndex',
    //   key: 'endIndex',
    // },
    {
      title: '一等座',
      dataIndex: 'ydz',
      key: 'ydz',
    },
    // {
    //   title: '一等座票价',
    //   dataIndex: 'ydzPrice',
    //   key: 'ydzPrice',
    // },
    {
      title: '二等座',
      dataIndex: 'edz',
      key: 'edz',
    },
    // {
    //   title: '二等座票价',
    //   dataIndex: 'edzPrice',
    //   key: 'edzPrice',
    // },
    {
      title: '软卧',
      dataIndex: 'rw',
      key: 'rw',
    },
    // {
    //   title: '软卧票价',
    //   dataIndex: 'rwPrice',
    //   key: 'rwPrice',
    // },
    {
      title: '硬卧',
      dataIndex: 'yw',
      key: 'yw',
    },
    // {
    //   title: '硬卧票价',
    //   dataIndex: 'ywPrice',
    //   key: 'ywPrice',
    // },
    ];


    const handleQuery = (param) => {
      if (!param) {
        param = {
          queryPage:{
            current: 1,
            size: pagination.value.pageSize
          },
          trainCode: params.value.trainCode,
          date: params.value.date,
          start: params.value.start,
          end: params.value.end
        };
      }
      loading.value = true;
      axios.post("/business/admin/daily-train-ticket/query-list", param).then((response) => {
        loading.value = false;
        let data = response.data;
        if (data.success) {
          dailyTrainTickets.value = data.content.list;
          // 设置分页控件的值
          pagination.value.current = param.queryPage.current;
          pagination.value.total = data.content.totalCount;
        } else {
          notification.error({description: data.message});
        }
      });
    };

    const handleTableChange = (pagination) => {
      // console.log("看看自带的分页参数都有啥：" + JSON.stringify(page));
      // pagination.value.pageSize = page.pageSize;
      handleQuery({
        queryPage:{
          current: pagination.current,
          size: pagination.pageSize
        }
      });
    };

    const calDuration = (startTime, endTime) => {
      let diff = dayjs(endTime, 'HH:mm:ss').diff(dayjs(startTime, 'HH:mm:ss'), 'seconds');
      return dayjs('00:00:00', 'HH:mm:ss').second(diff).format('HH:mm:ss');
    };

    onMounted(() => {
      handleQuery({
        queryPage: {
          current: 1,
          size: pagination.value.pageSize
        }
      });
    });

    return {
      dailyTrainTicket,
      visible,
      dailyTrainTickets,
      pagination,
      columns,
      handleTableChange,
      handleQuery,
      loading,
      params,
      calDuration
    };
  },
});
</script>
